<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>表单验证</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-6">
                    <div class="panel">
                        <div class="panel-heading">
                            基础表单验证
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal" id="basic_form">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label is-required">姓名：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" required minlength="2" name="name"
                                            placeholder="请输入姓名">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label is-required">昵称：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control " required minlength="5" name="nickname"
                                            placeholder="请输入昵称">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label is-required">邮件：</label>
                                    <div class="col-sm-9">
                                        <input type="email" class="form-control " required name="mail"
                                            placeholder="请输入邮件">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label is-required">个人网站：</label>
                                    <div class="col-sm-9">
                                        <input type="url" class="form-control " required name="website"
                                            placeholder="请输入个人网站">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-8 col-sm-offset-2">
                                        <button class="btn btn-primary" type="submit">提交表单</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="panel">
                        <div class="panel-heading">
                            多类型校验表单
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal" id="more_form">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label is-required">姓名：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" required data-msg="请输入姓名哎" name="name"
                                            placeholder="请输入姓名">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label is-required">性别：</label>
                                    <div class="col-sm-9">
                                        <div class="radio-inline">
                                            <label>
                                                <input type="radio" required data-msg="请选择性别" name="gender" value="0">男生
                                            </label>
                                        </div>
                                        <div class="radio-inline">
                                            <label>
                                                <input type="radio" name="gender" value="1">女生
                                            </label>
                                        </div>
                                        <label for="gender" class="radio-error error"></label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label is-required">爱好：</label>
                                    <div class="col-sm-9">
                                        <div class="checkbox-inline">
                                            <label>
                                                <input type="checkbox" required data-msg="请选择爱好" name="aihao"
                                                    value="0">游泳
                                            </label>
                                        </div>
                                        <div class="checkbox-inline">
                                            <label>
                                                <input type="checkbox" name="aihao" value="1">跳舞
                                            </label>
                                        </div>
                                        <div class="checkbox-inline">
                                            <label>
                                                <input type="checkbox" name="aihao" value="1">篮球
                                            </label>
                                        </div>
                                        <div class="checkbox-inline">
                                            <label>
                                                <input type="checkbox" name="aihao" value="1">健身
                                            </label>
                                        </div>
                                        <label for="aihao" class="checkbox-error error"></label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label is-required">事项：</label>
                                    <div class="col-sm-9">
                                        <select class="form-control select2" name="shixiang" required
                                            data-msg="请选择一个事项">
                                            <option value="">请选择相关事项</option>
                                            <option value="1">事项一</option>
                                            <option value="2">事项二</option>
                                            <option value="3">事项三</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label is-required">岗位：</label>
                                    <div class="col-sm-9">
                                        <select class="form-control select2" required name="gangwei" data-msg="请选择岗位"
                                            multiple>
                                            <option value="1">工程师</option>
                                            <option value="2">客服</option>
                                            <option value="3">管理员</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label is-required">备注信息：</label>
                                    <div class="col-sm-9">
                                        <textarea class="form-control" required data-msg="请输入备注信息" name="remark"
                                            placeholder="请输入备注信息"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-8 col-sm-offset-2">
                                        <button class="btn btn-primary" type="submit">提交表单</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel">
                        <div class="panel-heading">
                            完整表单验证
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal" id="full_form">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label is-required">姓名：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="name" placeholder="请输入姓名">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label is-required">密码：</label>
                                    <div class="col-sm-9">
                                        <input type="password" class="form-control" name="pwd" id="pwd"
                                            placeholder="请输入密码">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label is-required">确认密码：</label>
                                    <div class="col-sm-9">
                                        <input type="password" class="form-control" name="c_pwd" placeholder="请输入确认密码">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label is-required">邮件：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control " name="mail" placeholder="请输入邮件">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label is-required">个人网站：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control " name="website" placeholder="请输入个人网站">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label is-required">手机号码：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control " name="phone" placeholder="请输入手机号码">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-8 col-sm-offset-2">
                                        <button class="btn btn-primary" type="submit">提交表单</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script type="text/javascript">
        $("#basic_form").validate();

        var fullFormValidate = {
            rules: {
                name: {
                    required: true,
                    minlength: 2
                },
                pwd: {
                    required: true,
                    minlength: 5
                },
                c_pwd: {
                    required: true,
                    minlength: 5,
                    equalTo: "#pwd"
                },
                mail: {
                    required: true,
                    email: true
                },
                website: {
                    required: true,
                    url: true
                },
                phone: {
                    required: true,
                    isPhone: true,
                }
            },
            messages: {
                name: {
                    required: "请输入您的姓名",
                    minlength: "姓名必须两个字符以上"
                },
                pwd: {
                    required: "请输入您的密码",
                    minlength: "密码必须5个字符以上"
                },
                c_pwd: {
                    required: "请再次输入密码",
                    minlength: "密码必须5个字符以上",
                    equalTo: "两次输入的密码不一致"
                },
                mail: {
                    required: "请输入邮件地址",
                    email: "请输入正确的电子邮件地址"
                },
                website: {
                    required: '请输入网站地址',
                    url: '请输入正确的网站地址'
                },
                phone: {
                    required: '请输入手机号码',
                    isPhone: '请输入正确的手机号码'
                }
            }
        };

        $("#full_form").validate(fullFormValidate);
        $("#more_form").validate();

    </script>
</body>

</html>